<!-- 与vue相关的问题 -->

<!-- /**
 * 最开始我们的行业使用的是mvc 框架 c指的是控制层 存在于后端 
 * 前端依赖于后端的接口 没有办法独立开始 不够独立
 * 后续mvvm出现后 前端有了自己的控制器 使得前端可以独立开发 不需要将数据发给后台去存储
 * 虚拟dom是什么？
    1.虚拟dom是vue2.x才引入的，它的本质是js对象，所以才具备了跨平台的特质
 * 虚拟dom在vue中做了什么？
    1.vue的整个渲染过程
    2.将真实dom转化成虚拟dom(js对象)
    3.在更新dom的时候用来做对比(diff算法)
 * 虚拟dom是如何提升渲染效率的？(diff算法:解决性能浪费的问题)
    1.局部更新(节点数据)
    2.将直接操作dom的地方变成拿到两个js对象进行比较，找到差异项进行更新
 * vue的两大核心
    1.组件化
    2.数据驱动
 */ -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="message" placeholder="请随便输入" />
      <div>{{message}}</div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            message: "123",
          };
        },
      });
    </script>

    <!-- v-model 双向数据绑定的原理 -->
    <div>
      <h2>v-model的原理</h2>
      <input type="text" placeholder="请输入值" id="userName" />
      您输入的值:
      <p id="uName"></p>
    </div>
    <script>
      let obj = {};
      // 数据劫持
      Object.defineProperty(obj, "userName", {
        //取值
        get: function () {
          console.log("取值");
        },
        // 设置值
        set: function (val) {
          console.log(val + "设置值");
          document.getElementById("uName").innerText = val;
        },
      });

      document.getElementById("userName").addEventListener("input", () => {
        obj.userName = event.target.value;
      });
    </script>
  </body>
</html>
